import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Layout, Breadcrumb, Divider } from 'antd';
import './homepage.scss'

import ColumnChart from './components/columnChart';
import TableChart from './components/tableChart';
import RingChart from './components/ringChart';
import PieChart from './components/pieChart';
import LineChart from './components/lineChart';
import TopoChart from './components/topography'

const { Content } = Layout;

class homepage extends Component {

  render() {
    return (
      <div className="home">
        <div className="home-content">
          <div className="home-top">
            <div className="home-top-item">
              <div>已接入单位数量</div>
              <div>722</div>
            </div>
            <div className="home-top-item">
              <div>资产目录数量</div>
              <div>1007</div>
            </div>
            <div className="home-top-item">
              <div>已共享数据库数据源</div>
              <div>3423</div>
            </div>
            <div className="home-top-item">
              <div>已接入文件资源</div>
              <div>2134</div>
            </div>
            <div className="home-top-item">
              <div>已接入接口资源</div>
              <div>2134</div>
            </div>
            <div className="home-top-item">
              <div> 总交换任务数量</div>
              <div>1233</div>
            </div>

          </div>
          <div className="home-middle">
            <div className="home-middle-item">
              <div className="home-mid-itemInfo">
                <div className="mid-top">系统拓扑图</div>
                <div className="mid-bottom"><TopoChart /></div>
              </div>
            </div>
            <div className="home-middle-item">
              <div className="home-mid-itemInfo">
                <div className="mid-top">资源共享/资源申请</div>
                <div className="mid-bottom"><LineChart /></div>
              </div>
            </div>
            <div className="home-middle-item">
              <div className="home-mid-itemInfo">
                <div className="mid-top">交换任务状态</div>
                <div className="mid-bottom"><PieChart /></div>
              </div>
            </div>
          </div>
          <div className="home-bottom">
            <div className="home-bottom-item">
              <div className="home-bottom-itemInfo">
                <div className="bottom-top">资源目录共享占比</div>
                <div className="bottom-bottom"><RingChart /></div>
              </div>
            </div>
            <div className="home-bottom-item">
              <div className="home-bottom-itemInfo">
                <div className="bottom-top">最新交换数据</div>
                <div className="bottom-bottom"><TableChart /></div>
              </div>
            </div>
            <div className="home-bottom-item">
              <div className="home-bottom-itemInfo">
                <div className="bottom-top">本周交换数量</div>
                <div className="bottom-bottom"><ColumnChart /></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch) => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(homepage);